<template>
  <div>
    <Header />

    <div class="content clearfix">
      <!--排行榜-->
      <ul class="rank-list">
<!--        <li>
          <img src="/image/list-rank1.png" alt="">
          <p class="rank-list-phone">{{ ranking[0].phone | phoneCloak }}</p>
          <span>{{ ranking[0].totalBid | formatMoney }}元</span>
        </li>
        <li>
          <img src="/image/list-rank2.png" alt="">
          <p class="rank-list-phone">{{ ranking[1].phone | phoneCloak }}</p>
          <span>{{ ranking[1].totalBid | formatMoney }}元</span>
        </li>
        <li>
          <img src="/image/list-rank3.png" alt="">
          <p class="rank-list-phone">{{ ranking[2].phone | phoneCloak }}</p>
          <span>{{ ranking[2].totalBid | formatMoney }}元</span>
        </li>-->

        <li v-for="(r,i) in ranking">
          <img :src="'/image/list-rank' + (i+1) + '.png'" alt="">
          <p class="rank-list-phone">{{ r.phone | phoneCloak }}</p>
          <span>{{ r.totalBid | formatMoney }}元</span>
        </li>
      </ul>
      <!--产品列表-->
      <ul class="preferred-select clearfix">
        <ProductItem v-for="pro in page.data" :product="pro" />
      </ul>

      <!--分页-->
      <div class="page_box">
        <ul class="pagination">
          <li class="disabled"><a href="javascript:;"  @click="gogogo(1)">首页</a></li>
          <li><a href="javascript:;" @click="gogogo(currPage - 1)">上一页</a></li>
          <li class="active"><span>{{ currPage }}</span></li>
          <li><a href="javascript:;" @click="gogogo(currPage + 1)">下一页</a></li>
          <li><a href="javascript:;" @click="gogogo(page.totalPage)">尾页</a></li>
          <li class="totalPages"><span>共{{ page.totalPage }}页</span></li>
        </ul>
      </div>

    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Vue from "vue";
import ProductItem from "@/components/ProductItem";
import filters from "@/utils/filters";
export default {
  name: "List",
  data() {
    return {
      // 分页对象
      page: {
        data: [],
        totalPage: 9999
      },
      currPage: 1,
      ranking: []
    }
  },
  filters,
  methods: {
    gogogo(page) {

      if (page == 0 || page > this.page.totalPage) {
        return;
      }

      this.currPage = page;
      let type = this.$route.params.type
      Vue.axios.get("/product/"+type+"/page"+page).then(({data}) => this.page = data)
    }
  },
  created() {
    this.gogogo(1);

    Vue.axios.get("/bid/ranking").then(({data}) => this.ranking = data)
  },
  components: {ProductItem, Footer, Header}
}
</script>

<style scoped>

</style>